前前言

嗨，大家好，我是 Lacie，您現在收看的是 Swift - 來吧！鐵人三十項 系列的第四篇
在鐵人賽完結後，為保持持續做筆記的習慣
將會在我的 Medium 繼續撰寫文章，若有興趣者可前往觀看。

前言

由於我也是第一次接觸 SwiftUI，故想說先來熟悉一下基礎操作的部分。
現在國內外 SwiftUI 的文章及影片都沒有太多
若有興趣的人也可以參考以下連結進行學習：

彼得潘 / Appcoda-1 / Appcoda-2 / SwiftUI / Programming With Swift

學習 SwiftUI 的理由

優點：

• 以更直覺、更精簡的方式來製作 UI 畫面
• 即時預覽，讓你不用每次一直 build
• 支援 iOS 13 的 dark mode

缺點：

• iOS 13 以上才支援（公司產品為求穩定可能沒有那麼快拿來正式使用）
• 由於還在 Beta 版，尚還在發展中，可能會有些 Bug，或者現在學的之後就改版了
• 才釋出不久，相關文章、影片及教學都不多，甚至發問可能都沒人能回答
• 用久了 UIKit，突然要重新學習新東西

新手要學哪一個？（UIKit vs SwiftUI）

兩個都要學

新增的特色

1. 即時預覽

按下右上角的 Resume

即可產生即時預覽（ Beta版可能要注意 Resume 的狀態，有時會壞掉沒有即時更新，要重按 ）
下圖右下角的 1 為 Live Preview ，可使用動態預覽（ 類似 Build 到模擬器上的效果 ）
下圖右下角的 2 為 Preview on Device （ Build 到手機上 ）

2. 滾動軸

可點選或滾動，快速找到你想要修改的 code

修改元件的幾種方式

1. 直接寫 code

2. 點選想要修改的元件（ 點程式碼或是即時預覽皆可 ）從右側 Attributes inspector 設定

3. 按 command 點選元件（ 點程式碼或是即時預覽皆可 ），點選 Show SwiftUI Inspector 可彈出設定

4. 按 control + option 點選元件（ 點程式碼或是即時預覽皆可 ），直接彈出小型 Attributes inspector
5. 從 Libiary 拉東西來用

Libiary 的變動

• 右上角的＋（ Libiary ）

• 第一欄係跟 View 有關的一些元件

• 第二欄係跟修改 View 有關的一些 Modifiers

• 第三欄係 Code Snippets 被移進來了

• 第四欄係媒體庫，在 Assets.xcassets 新增圖片後，可在這直接以拖拉方式產生 Image

• 第五欄係顏色庫，在 Assets.xcassets 新增 Color Set 後，可在這以拖拉方式產生顏色的 code

下集待續 ...